<template>
	<view class="acqui-dynamic-message" v-show="animalType == 1 ? showMessage : true">
		<text class='text-red'>{{ alertList[cureentMessageIndex].label }}</text>
	</view>
</template>

<script>
	export default {
		name: 'acqui-dynamic-message',
		props: {
			animalType: {
				//动画类型 0 一直显示 1 闪烁  注意如果是0 切换时长=显示时长+隐藏时长
				type: Number | String,
				default: 1
			},
			showTime: {
				//显示时长，单位s
				type: Number,
				default: 1.5
			},
			hideTime: {
				//隐藏时长，单位s
				type: Number,
				default: 0.5
			},
			startShowMessageTime: {
				//第一次显示的时间是多少秒后 0表示立即显示，单位s
				type: Number,
				default: 0
			},
			messagePosition: {
				//信息位置：leftTop 左上  rightTop 右上   bottomLeft 左下   bottomRight 右下
				type: String,
				default: 'rightTop'
			},
			messageCusPosition: {
				//自定义信息位置(优先) 直接写位置信息 如 "left:100rpx;top:200rpx" ...
				type: String
			},
			isFixed: {
				// 是否固定位置
				type: Boolean,
			},
			messageList: {
				//消息列表
				type: Array,
				default () {
					return [];
				}
			}
		},
		computed: {
			alertList(){
				return this.messageList.filter(t => t.value > 0);
			}
		},
		data() {
			return {
				showMessage: false,
				timer: null,
				defaltPositionInfo: {
					leftTop: {
						top: '200rpx',
						left: '10rpx'
					},
					rightTop: {
						top: '120rpx',
						right: '12rpx'
					},
					bottomLeft: {
						bottom: '200rpx',
						left: '10rpx'
					},
					bottomRight: {
						bottom: '200rpx',
						right: '10rpx'
					}
				},
				cureentMessageIndex: 0
			};
		},
		mounted() {
			const timer = setTimeout(() => {
				clearTimeout(timer);
				this.showMessage = true;
				this.mountAnimal();
			}, this.startShowMessageTime * 1000);
		},
		methods: {
			setPosition() {
				if (this.messageCusPosition) return this.messageCusPosition + (this.isFixed && ';position:fixed;');
				else {
					const obj = {
						...this.defaltPositionInfo[this.messagePosition]
					}
					if (this.isFixed) obj.position = 'fixed'
					return obj
				};
			},
			mountAnimal() {
				let time = 0;
				this.timer = setInterval(() => {
					++time;
					if (this.showMessage && time >= this.showTime) {
						// 隐藏
						time = 0;
						this.showMessage = false;
					} else if (!this.showMessage && time >= this.hideTime) {
						// 显示
						if (this.cureentMessageIndex < this.alertList.length - 1) ++this.cureentMessageIndex;
						else this.cureentMessageIndex = 0;
						time = 0;
						this.showMessage = true;
					}
				}, 1000);
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}
	};
</script>

<style lang="less" scoped>
	.acqui-dynamic-message {
		//position: absolute;
		z-index: 10;
		background-color: rgba(255, 255, 255, 0.88);
		border-radius: 10rpx;
		color: white;
		padding: 10rpx;
		padding-right: 20rpx;
		font-size: 20rpx;
		display: flex;
		align-items: center;

		.user_photo {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
</style>